<template>
	<view class="seller-view">
		<view class="u-flex u-row-between">
            <view class="u-flex u-flex-3" @click="goSeller()">
				<u-image mode="widthFix" width="200rpx" :src="shopInfo.shop_logo" v-if="shopInfo.shop_logo"></u-image>
                <u-image mode="widthFix" width="200rpx" src="/static/images/icon-no-shop-logo.png" v-else></u-image>
                <view class="seller-name u-margin-left-10 u-flex">
                    <text class="u-flex-1" style="vertical-align: middle;word-break: break-all;">{{shopInfo.shop_name}}</text>
                    <text class="self u-m-l-10 u-m-r-10" v-if="shopInfo.self_operated">自营</text>
                </view>
            </view>
            <view class="u-flex">
				<!-- <u-button class='qb' type="error" shape="circle" size="mini" plain @click="goSellerAllGoods()">全部商品</u-button> -->
                <span class='all-products' type="error" shape="circle" size="mini" plain @click="goSellerAllGoods()">全部商品</span>
                <span class='shop-shopping' type="error" shape="circle" size="mini" plain @click="goSeller()">进店逛逛</span>
                <!-- <u-button class="u-margin-left-10" type="warning" shape="circle" size="mini" @click="goSeller()">进店逛逛</u-button> -->
            </view>
        </view>
        <view class="seller-tabs-view u-flex u-row-between u-text-center">
            <view class="seller-tab">
                <view>商品描述&nbsp;{{shopInfo.shop_description_credit}}</view>
            </view>
            <view class="seller-tab">
                <view>卖家信用&nbsp;{{shopInfo.shop_credit}}</view>
            </view>
            <view class="seller-tab">
                <view>物流服务&nbsp;{{shopInfo.shop_delivery_credit}}</view>
            </view>
        </view>
	</view>
</template>

<script>
    import * as API_Shop from '@/api/shop.js'

	export default {
		data() {
			return {
                shopInfo: {},
			};
		},
        props: {
            sellerId: {
                type: String,
                default: ''
            }
        },
        mounted() {
            setTimeout(() => {
                this.getSeller();
            },500)
        },
        watch: {
            shopInfo(newVal) {
                this.$emit('self-change', newVal.self_operated)
            }
        },
        methods: {
            getSeller(){
                API_Shop.getShopBaseInfo(this.sellerId).then(res => {
                    this.shopInfo = res;
                })
            },
            goSellerAllGoods(){
                const _shopInfo = {
                    shop_id: this.shopInfo.shop_id,
                    shop_name: this.shopInfo.shop_name,
                    shop_logo: this.shopInfo.shop_logo,
                    tabNum: 1,
                };
                this.navigateTo(`/pages/shop/shop${this.$u.queryParams(_shopInfo, true, 'indices')}`)
            },
            goSeller(){
                const _shopInfo = {
                    shop_id: this.shopInfo.shop_id,
                    shop_name: this.shopInfo.shop_name,
                    shop_logo: this.shopInfo.shop_logo,
                    tabNum: 0,
                };
                this.navigateTo(`/pages/shop/shop${this.$u.queryParams(_shopInfo, true, 'indices')}`)
            }
        }
	}
</script>

<style lang="scss">
    .seller-view {
        border-radius: 15rpx;
        margin-top: 23rpx;
        background-color: #FFFFFF;
        padding: 20rpx;
        .seller-name {
            font-weight: 600;
            display: contents;
        }
        .seller-tabs-view {
            margin-top: 35rpx;
            margin-bottom: 10rpx;
            .seller-tab {
                width: 200rpx;
                font-size: 25rpx;
                color: #909399;
            }
        }
    }
	.all-products {
		color: #fa3534 !important;
		border:1px solid #fa3534 !important;
		background-color: #fef0f0 !important;
		display: flex;
		flex-direction: row;
		align-items: center;
		line-height: 42rpx;
		padding: 2rpx 20rpx;
		border-radius: 32rpx;
		font-size: 24rpx;
		margin-top:-8px;
	}
	.shop-shopping {
		color: #ffff !important;
		border:1px solid #ff9900 !important;
		background-color: #ff9900 !important;
		display: flex;
		flex-direction: row;
		align-items: center;
		line-height: 42rpx;
		padding: 2rpx 20rpx;
		border-radius: 32rpx;
		font-size: 24rpx;
		margin-top:-8px;
		margin-left:20rpx;
	}
</style>
